Valid for Sitecore 5.3

Embedding Flash in Content

This document describes embedding Flash objects in pages served by Sitecore. This is an introductory resource providing an overview of certain considerations; it is assumed that most Flash implementations will be more complex than the solution described by this document and will require additional parameters and other logic. Check for other resources describing utilization of Flash with Sitecore including:

http://groups.yahoo.com/group/sitecore/message/1277
Using XSLT to render Flash
http://sdn.sitecore.net/Scrapbook/Using%20XSLT%20to%20render%20Flash.html

1. Overview

One of the primary goals of most CMS implementations is the separation of content from presentation to make content reusable. The need for layering is apparent when content must be syndicated for clients such as RSS readers. Storing image references in HTML fields could require runtime markup alterations for PDAs and other devices; transforming HTML at runtime is a pitfall all projects should strive to avoid. A separate template field should be provided for each media asset which will only be displayed in certain views (web browsers) but not in others (for instance PDAs and cell phones). Generally, the same concerns also lead to consistency and therefore usability as minimal options are exposed. WYSIWYG editors in general defeat the objective of separating content from presentation and should be configured with minimal features and used as sparingly as possible.

Flash can defeat separation of content from presentation as well, though this is commonly mitigated by generating XML from the CMS for consumption by Flash. In many cases it is appropriate for developers to fully control Flash resources. Otherwise, just as the image should be stored in a separate field, the Flash is unlikely to appear in every rendition of the content and should not be embedded directly in the HTML editor. Structuring the data into fields (one for the content and one for the related media asset) is best practice. Rendering logic is used to determine if/how to assemble the page for different clients.

There are frequently requests to embed Flash in the Sitecore HTML fields, a subject that raises various philosophical and technical challenges for CMS developers. Because of a recent patent dispute, “Users cannot directly interact with Microsoft ActiveX controls loaded by the APPLET, EMBED, or OBJECT elements” (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/activating_activex.asp). This challenge is further described at:

In short, Flash and other resources must always be embedded using JavaScript instead of object/embed tags. If it is absolutely necessary to embed Flash objects in an HTML field, it is not realistic to expect the editor to generate the required JavaScript. Instead, either a token or a rendering should be embedded in the HTML editor and substituted with the appropriate script by a rendering component at runtime.

In addition to the path to the .swf file, most Flash invocations will pass additional control information such as dimensions and background color. There are several potential solutions to any challenge:

Using a Sitecore media template for Flash items with fields for the most common parameters
Hard-coding in Layout and JavaScript
AJAX reading Sitecore XML containing parameters
Passing parameters to a rendering
Embedding renderings or simple tokens in the HTML Editor for execution or replacement at runtime (http://sdn.sitecore.net/Scrapbook/Putting%20renderings%20in%20the%20WYSIWYG%20fields.html). Consider using a simple token such as $flash in the HTML editor; as of 5.1.1.11 is not possible to drag-and-drop renderings in the HTML editor (the source code must be edited by hand).
Giving users control of Layouts
Parameters can be stored in Sitecore items and selected by users
A generic JavaScript function allowing a configuration object or variable number of parameters to be passed

This document describes the first solution.

2. Selecting Flash

In Content Editor navigate to the Media Library, create a folder where flash media will reside and upload Flash files to this directory. When a flash file is uploaded to the Media Library the appropriate Flash template is assigned to the new item automatically. Such items will have /sitecore/templates/System/Media/Unversioned/Flash or /sitecore/templates/System/Media/Versioned/Flash template, the latter one will be assigned if ‘Make Uploaded Media Items Versionable’ checkbox was checked in the Advanced upload dialogue.

Add a field named Flash of type Lookup to any templates for which the user should be allowed to select a Flash object. Set the Source property of this field to “query:/sitecore/media library/Flash//*[@@templatename='Flash']” or equivalent (http://sdn.sitecore.net/Reference/Using%20Sitecore%20Query.html) and test the template. Users will select Flash objects by name, but Sitecore actually stores the GUID of the selected item – all other properties can be retrieved from the GUID.

3. Sample Flash Control

Sample code is provided for a Sitecore WebControl which will render a Flash object. Assuming the supporting JavaScript file is stored as /resources/js/flash.js, the <head> element of any Layout which could be used to render a Flash object should contain the following code:

The web control can be invoked directly from a layout or sublayout (static binding) bound to a placeholder (dynamic binding). In the case of static binding, the equivalent of the following directive must be added to the layout or sublayout:

<%@ register TagPrefix="scflash" Namespace="SCFlash.WebControls" Assembly="SCFlash" %>

The control can then be invoked with code such as the following:

<scflash:FlashControl runat="server" />

To bind the rendering to a placeholder, see the instructions at http://sdn.sitecore.net/Developer/Client%20Tutorials/Presentation%20Layer/Create%20a%20WebControl%20Rendering.html.

In either case, if a data source is specified it should be the path to a Flash resource based on the template defined above. If no data source is specified the field named “Flash” of the context item is used to determine the location of the Flash resource (it is assumed to contain the GUID of an object based on the Flash template). Any parameters specified as attributes to the web control will override field values in the data source. This web control supports the following parameters:

Parameter:	Purpose:
AddXmlUrl	This attribute is specific to the requirement to generate XML for consumption by Flash and is described elsewhere (it provides the Flash object with a URL from which to retrieve XML). When used, the xmlurl variable is automatically added to FlashVars.
Path	Path to .swf file relative to Sitecore document root.
Height	Height of Flash object.
Width	Width of Flash object.
FlashVars	Key=Value parameters to be passed to the flash object, separated by ampersand (“&”) - URL-special characters (especially ? and &) must be escaped.

Download sample code for embedding of Flash objects.

4. Notes

If the same flash object will be used with different parameters, simply duplicate an existing media item (they contain metadata about files) and change parameters.
Flash can interfere with the sidebar; the control might have an option to disable in preview mode.